<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
<!--    <meta charset="UTF-8">-->
<!--    <title>产品列表</title>-->
<!--    <link th:href="@{/login/css/bootstrap1.css}" rel="stylesheet"/>-->
    <link th:href="@{/login/css/product1.css}" rel="stylesheet"/>
<!--    <script th:src="@{/login/js/bootstrap1.js}"></script>-->
    <myhead th:replace="user/layout :: head('前台管理页面')"></myhead>
</head>
<body>
<!--前台页面,未实现局部刷新-->
    <div class="container">
        <div th:replace="user/layout :: topNav('front')"></div>
        <div class="card" style="width: 100%;margin-bottom: 20px;padding:20px">
            <form class="row g-3" th:action="@{/user/searchProduct}" method="post">
                <div class="col-10">
                    <label for="productName" class="form-label">商品名称</label>
                    <input type="text" class="form-control" id="productName" name="productName" placeholder="请输入商品名称">
                </div>
                <div class="col-md-5">
                    <label for="minAmount" class="form-label">金额最小值</label>
                    <input type="number" class="form-control" id="minAmount" name="minAmount">
                </div>
                <div class="col-md-5">
                    <label for="maxAmount" class="form-label">金额最大值</label>
                    <input type="number" class="form-control" id="maxAmount" name="maxAmount">
                </div>
                <div class="col-md-6 row" style="">
                    <div class="col-8">
                        <label for="productCategory" class="form-label">商品类型</label>
                        <select id="productCategory" name="productCategory" class="form-select">
                            <option value="">请选择分类</option>
                            <option>电脑配件</option>
                            <option>电脑配件</option>
                            <option>服装</option>
                            <option>电子产品</option>
                            <option>家居用品</option>
                            <option>书籍</option>
                        </select>
                    </div>
                    <div class="col-4" style="margin-top: 35px">
                        <button type="submit" class="btn btn-primary">查询</button>
                    </div>
                </div>
            </form>
        </div>
        <div class="grid-3" style="width: 100%">
            <div class="card" style="width: 18rem;" th:each="product:${products}">
                <img th:src="${product.imageUrl}" class="card-img-top productImg" th:alt="${product.name}" style="height: 270px;overflow: hidden">
                <!--        数据库字段多个单词之间用下划线连接，在实体类中变量是以小驼峰命名，所以二者存在冲突，
                法一：可以在xml配置文件中专门设置一个resultMap做映射绑定，实现字段对应变量
                法二：在全局配置中添加一个设置，下划线转为驼峰命名
                -->
                <div class="card-body">
                    <h3 class="card-title" th:text="${product.name}"></h3>
                    <p th:text="${product.description}"></p>
                    <span th:text="${product.price}" style="color:red;font-size: 26px;"></span>&nbsp&nbsp|
                    <span th:text="${product.stock}" style="color:gray;font-size: 14px;"></span>
                </div>
            </div>
        </div>
    </div>


<!--    <div th:each="product:${products}">-->
<!--        商品名称：<p th:text="${product.name}"></p>-->
<!--        商品描述：<p th:text="${product.description}"></p>-->
<!--        商品金额：<span th:text="${product.price}"></span>-->
<!--        商品库存：<span th:text="${product.stock}"></span>-->
<!--    </div>-->
</body>
</html>